import React, { useState } from 'react';
import { manageRoutes, manageMenu } from "../../router/ManageRouter";
import {Switch,Redirect} from 'react-router-dom'
import './index.css'
import { Layout, Menu} from 'antd';
const { Content, Footer, Sider } = Layout;



export default function ManagePage() {
    const [collapsed, setCollapsed] = useState(false);


    function onCollapse() {
        if (collapsed === false) {
            setCollapsed(true);
        } else {
            setCollapsed(false);
        }
    }


    return (
        <Layout className="layoutStyle">
            <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
                <Menu style={{height:900}} theme="dark" defaultSelectedKeys={['1']} mode="inline" >
                    {manageMenu()}
                </Menu>
            </Sider>

            <Layout className="layoutStyle">
                <Content className="contentStyle">
                    <Switch>
                        {manageRoutes()}
                        <Redirect to="/ManagePage/Information" />
                    </Switch>

                </Content>
                <Footer className="bottomStyle">cet4-6rs-hooks ©2021 Created by Kings</Footer>
            </Layout>
        </Layout>
    )
}
export { ManagePage }